<template>
	<view :style="{ paddingTop: systemInfo.statusBarHeight + systemInfo.titleBarHeight + 'px' }">
		<title-bar :back="true" :title="title"></title-bar>
		<view class="page-content common-page-content" :style="{ minHeight: systemInfo.minHeight }">
			<view class="info-layout header-layout">
				<view class="info-item">
					<view class="title">纪念馆类型</view>
					<radio-group @change="numberChange" class="info">
						<radio color="#56BF84" value="1" :checked="deceasedNumber == 1" style="margin-right: 26.28rpx;">单人馆</radio>
						<radio color="#56BF84" value="2" :checked="deceasedNumber == 2">双人馆</radio>
					</radio-group>
				</view>
			</view>
			<!-- 逝者 -->
			<view v-for="(deceased, index) in form.deceaseds" :key="index" class="deceased-layout">
				<view class="header-layout">
					<view class="header-image">
						<image v-if="deceased.photoUrl" :src="imageUrl + deceased.photoUrl" class="item-img"></image>
						<image v-else src="@/static/image/common/head_default.png" class="item-img"></image>
						<image mode="aspectFit" class="item-bg"></image>
					</view>
					<view class="upload-btn" @click="uploadPhoto(index)">上传照片</view>
				</view>
				<view class="info-item">
					<view class="title">逝者姓名：</view>
					<input class="info" v-model="deceased.name" maxlength="4" placeholder="请输入逝者姓名" />
				</view>
				<view class="info-item">
					<view class="title">逝者性别：</view>
					<radio-group class="info" @change="sexChange" :id="index">
						<radio color="#56BF84" value="1" :checked="deceased.sex == 1" style="margin-right: 26.28rpx;">男</radio>
						<radio color="#56BF84" value="2" :checked="deceased.sex == 2">女</radio>
					</radio-group>
				</view>
				<view class="info-item">
					<view class="title">日期类型：</view>
					<radio-group class="info" @change="dateTypeChange" :id="index">
						<radio color="#56BF84" style="margin-right: 26.28rpx;" value="1" :checked="deceased.dateType == 1">公历</radio>
						<radio color="#56BF84" style="margin-right: 26.28rpx;" value="0" :checked="deceased.dateType == 0">农历</radio>
						<radio color="#56BF84" value="2" :checked="deceased.dateType == 2">其他</radio>
					</radio-group>
				</view>
				<view v-if="deceased.dateType != 2">
					<view class="info-item">
						<view class="title">出生日期：</view>
						<picker class="info" start="0001-01-01" :value="deceased.birthday ? deceased.birthday : '1940-01-01'" mode="date" @change="bindBirthdayChange" :id="index">
							<text>{{ deceased.birthday ? deceased.birthday : '请选择出生日期' }}</text>
						</picker>
					</view>
					<view class="info-item">
						<view class="title">逝世日期：</view>
						<picker class="info" start="0001-01-01" :value="deceased.deathDay ? deceased.deathDay : '2020-01-01'" mode="date" @change="bindDeathDayChange" :id="index">
							<text>{{ deceased.deathDay ? deceased.deathDay : '请选择逝世日期' }}</text>
						</picker>
					</view>
				</view>
				<view v-else>
					<view class="info-item">
						<view class="title">出生日期：</view>
						<radio-group class="info" @change="birthdayTypeChange" :id="index">
							<radio color="#56BF84" style="margin-right: 26.28rpx;" value="2" :checked="deceased.birthdayType == 2">公元前</radio>
							<radio color="#56BF84" style="margin-right: 26.28rpx;" value="1" :checked="deceased.birthdayType == 1">公元后</radio>
							<radio color="#56BF84" value="3" :checked="deceased.birthdayType == 3">不详</radio>
						</radio-group>
					</view>
					<view class="info-item" v-if="deceased.birthdayType != 3">
						<view class="title">出生日期：</view>
						<picker class="info" start="0001-01-01" :value="deceased.birthday ? deceased.birthday : '0100-01-01'" mode="date" @change="bindBirthdayChange" :id="index">
							<text>{{ deceased.birthday ? deceased.birthday : '请选择出生日期' }}</text>
						</picker>
					</view>
					<view class="info-item" :class="{ 'none-border': deceased.dateType == 2 && deceased.deathDayType != 3 }">
						<view class="title">逝世日期：</view>
						<radio-group class="info" @change="deathDayTypeChange" :id="index">
							<radio color="#56BF84" style="margin-right: 26.28rpx;" value="2" :checked="deceased.deathDayType == 2">公元前</radio>
							<radio color="#56BF84" style="margin-right: 26.28rpx;" value="1" :checked="deceased.deathDayType == 1">公元后</radio>
							<radio color="#56BF84" value="3" :checked="deceased.deathDayType == 3">不详</radio>
						</radio-group>
					</view>
					<view class="info-item" v-if="deceased.deathDayType != 3">
						<view class="title">逝世日期：</view>
						<picker class="info" start="0001-01-01" :value="deceased.deathDay ? deceased.deathDay : '0100-01-01'" mode="date" @change="bindDeathDayChange" :id="index">
							<text>{{ deceased.deathDay ? deceased.deathDay : '请选择逝世日期' }}</text>
						</picker>
					</view>
				</view>
				<view class="textarea-title-layout"><view class="textarea-title-text">墓志铭</view></view>
				<view class="textarea-layout">
					<view class="content-top"></view>
					<view class="content-middle">
						<textarea
							style="min-height: 70.09rpx;"
							auto-height
							placeholder="请输入墓志铭"
							v-model="deceased.epitaph"
							disable-default-padding
							maxlength="20"
							@input="epitaphChange"
							:id="index"
						></textarea>
						<view class="textarea-prompt">
							您还可以输入
							<text class="number">{{ deceased.epitaphNum }}</text>
							个字
						</view>
					</view>
					<view class="content-bottom"></view>
				</view>
				<view class="textarea-title-layout"><view class="textarea-title-text">逝者简介</view></view>
				<view class="textarea-layout">
					<view class="content-top"></view>
					<view class="content-middle">
						<textarea
							auto-height
							placeholder="请输入逝者简介"
							v-model="deceased.introduction"
							disable-default-padding
							maxlength="1500"
							@input="introductionChange"
							:id="index"
						></textarea>
						<view class="textarea-prompt">
							您还可以输入
							<text class="number">{{ deceased.introductionNum }}</text>
							个字
						</view>
					</view>
					<view class="content-bottom"></view>
				</view>
			</view>
			<!-- 与逝者关系 -->
			<view class="info-item">
				<view class="title">您是逝者的</view>
				<picker
					class="info"
					:range="[relationshipList, relationshipChildrenList]"
					range-key="name"
					mode="multiSelector"
					@change="bindRelationshipChange"
					@columnchange="bindRelationshipColumnChange"
				>
					<text>{{ form.relatives[0].name ? form.relatives[0].name : '请选择您与逝者的关系' }}</text>
				</picker>
			</view>
			<view class="common-margin-top"><common-button :title="!hallId ? '免费创建纪念馆' : '修改纪念馆'" @click="submit()"></common-button></view>
		</view>
	</view>
</template>

<script>
import mixin from '@/pages/common/mixins/memorial-hall.js';
import { mapState, mapActions } from 'vuex';

export default {
	mixins: [mixin],
	data() {
		return {
			baseUrl: process.env.NODE_ENV === 'development' ? this.$config.baseUrl.dev : this.$config.baseUrl.pro,
			relationshipChildrenList: [],
			deceasedNumber: 1,
			oldDeceaseds: [],
			hallId: undefined,
			title: '创建纪念馆',
			form: {
				deceaseds: [
					{
						sex: 1,
						dateType: 1,
						birthdayType: 1,
						deathDayType: 1,
						epitaphNum: 20,
						introductionNum: 1500
					}
				],
				relatives: [
					{
						relationshipType: undefined,
						relationshipCode: undefined,
						name: undefined
					}
				]
			}
		};
	},
	computed: {
		...mapState({
			relationshipList: state => state.app.relationshipList,
			systemInfo: state => state.app.systemInfo
		})
	},
	methods: {
		...mapActions(['getRelationship']),
		/* 获取亲友关系字典 */
		getRelationshipList() {
			if (this.relationshipList.length == 0) {
				this.getRelationship().then(res => {
					if (res.code === 200) {
						if (this.relationshipList.length > 0) {
							this.relationshipChildrenList = this.relationshipList[0].children;
						}
						if (this.hallId != undefined) {
							this.loadRelative();
						}
					}
				});
			} else {
				this.relationshipChildrenList = this.relationshipList[0].children;
				if (this.hallId != undefined) {
					this.loadRelative();
				}
			}
		},
		/* 加载纪念馆详情 */
		loadDetail() {
			this.$http.get('/hall/' + this.hallId).then(res => {
				if (res.code === 200) {
					delete res.data.deceaseds;
					delete res.data.relatives;
					this.form = Object.assign(this.form, res.data);
				}
			});
		},
		/* 加载逝者信息 */
		loadDeceased() {
			this.$http.get('/deceased/list', { params: { hallId: this.hallId } }).then(res => {
				if (res.code === 200) {
					// 逝者墓志铭、简介字数设置
					res.data.forEach(item => {
						item.epitaphNum = item.epitaph == null ? 20 : 20 - item.epitaph.length;
						item.introductionNum = item.introduction == null ? 1500 : 1500 - item.introduction.length;
					});
					this.deceasedNumber = res.data.length;
					this.oldDeceaseds = this.oldDeceaseds.concat(res.data);
					this.$set(this.form, 'deceaseds', res.data);
				}
			});
		},
		/* 加载亲友团 */
		loadRelative() {
			this.$http.get('/relative/list', { params: { hallId: this.hallId } }).then(res => {
				if (res.code === 200) {
					// 只保留当前用户的亲友数据
					this.$set(this.form, 'relatives', [this.getRelativeByUser(res.data)]);

					let relationshipParent = this.relationshipList.find(item => item.id == this.form.relatives[0].relationshipType);
					let relationship = relationshipParent.children.find(item => item.id == this.form.relatives[0].relationshipCode);
					this.$set(this.form.relatives[0], 'name', relationship ? relationship.name : undefined);
				}
			});
		},
		/* 纪念馆逝者人数选择 */
		numberChange(e) {
			let count = this.form.deceaseds.length - e.detail.value;
			if (count < 0) {
				if (this.oldDeceaseds.length >= e.detail.value) {
					this.form.deceaseds = this.form.deceaseds.concat(this.oldDeceaseds.slice(this.form.deceaseds.length, e.detail.value));
				} else {
					this.form.deceaseds = this.form.deceaseds.concat(this.oldDeceaseds.slice(this.form.deceaseds.length));
					for (let i = 0; i < e.detail.value - this.oldDeceaseds.length - (this.hallId ? 0 : 1); i++) {
						this.form.deceaseds.push({
							sex: 1,
							dateType: 1,
							birthdayType: 1,
							deathDayType: 1,
							epitaphNum: 20,
							introductionNum: 1500
						});
					}
				}
			} else {
				this.form.deceaseds.splice(this.form.deceaseds.length - count, count);
			}
			this.deceasedNumber = e.detail.value;
		},
		/* 上传照片 */
		uploadPhoto(index) {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed '],
				success: chooseImageRes => {
					uni.showLoading({
						title: '图片上传中...'
					});
					const tempFilePaths = chooseImageRes.tempFilePaths;
					uni.uploadFile({
						url: this.baseUrl + '/app/common/upload',
						filePath: tempFilePaths[0],
						name: 'file',
						header: {
							Authorization: uni.getStorageSync('Authorization')
						},
						success: uploadFileRes => {
							let data = JSON.parse(uploadFileRes.data);
							this.$set(this.form.deceaseds[index], 'photoUrl', data.fileName);
							uni.hideLoading();
						},
						fail: error => {
							uni.hideLoading();
							uni.showToast({
								icon: 'none',
								title: '上传失败，请重试'
							});
						}
					});
				}
			});
		},
		/* 性别选择 */
		sexChange(e) {
			this.$set(this.form.deceaseds[e.currentTarget.id], 'sex', e.detail.value);
		},
		/* 日期类型选择 */
		dateTypeChange(e) {
			this.$set(this.form.deceaseds[e.currentTarget.id], 'dateType', e.detail.value);
			if (e.detail.value == 2) {
				// 其他则默认设置为公元前
				this.$set(this.form.deceaseds[e.currentTarget.id], 'birthdayType', 2);
				this.$set(this.form.deceaseds[e.currentTarget.id], 'deathDayType', 2);
			} else {
				this.$set(this.form.deceaseds[e.currentTarget.id], 'birthdayType', e.detail.value);
				this.$set(this.form.deceaseds[e.currentTarget.id], 'deathDayType', e.detail.value);
			}
			this.$set(this.form.deceaseds[e.currentTarget.id], 'birthday');
			this.$set(this.form.deceaseds[e.currentTarget.id], 'deathDay');
		},
		/* 生日日期类型选择 */
		birthdayTypeChange(e) {
			this.$set(this.form.deceaseds[e.currentTarget.id], 'birthdayType', e.detail.value);
			this.$set(this.form.deceaseds[e.currentTarget.id], 'birthday');
		},
		/* 生日日期选择 */
		bindBirthdayChange(e) {
			this.$set(this.form.deceaseds[e.currentTarget.id], 'birthday', e.detail.value);
		},
		/* 忌日日期类型选择 */
		deathDayTypeChange(e) {
			this.$set(this.form.deceaseds[e.currentTarget.id], 'deathDayType', e.detail.value);
			this.$set(this.form.deceaseds[e.currentTarget.id], 'deathDay');
		},
		/* 忌日日期选择 */
		bindDeathDayChange(e) {
			this.$set(this.form.deceaseds[e.currentTarget.id], 'deathDay', e.detail.value);
		},
		/* 亲属关系列选择 */
		bindRelationshipColumnChange(e) {
			if (e.detail.column == 0) {
				this.relationshipChildrenList = this.relationshipList[e.detail.value].children;
			}
		},
		/* 亲友关系选择 */
		bindRelationshipChange(e) {
			this.$set(this.form.relatives[0], 'name', this.relationshipChildrenList[e.detail.value[1]].name);
			this.$set(this.form.relatives[0], 'relationshipType', this.relationshipList[e.detail.value[0]].id);
			this.$set(this.form.relatives[0], 'relationshipCode', this.relationshipChildrenList[e.detail.value[1]].id);
		},
		/* 墓志铭输入监听 */
		epitaphChange(e) {
			this.form.deceaseds[e.currentTarget.id].epitaphNum = 20 - e.detail.value.length;
		},
		/* 逝者简介输入监听 */
		introductionChange(e) {
			this.form.deceaseds[e.currentTarget.id].introductionNum = 1500 - e.detail.value.length;
		},
		/* 创建纪念馆 */
		createHall() {
			if (this.hallId == undefined) {
				this.$http.postJson('/hall', this.form).then(res => {
					if (res.code === 200) {
						uni.redirectTo({
							url: './create-memorial-hall-success?hallId=' + res.data.id
						});
					}
				});
			} else {
				this.$http.put('/hall', this.form).then(res => {
					if (res.code === 200) {
						uni.showToast({
							icon: 'none',
							title: '修改成功'
						});
						setTimeout(() => {
							uni.navigateBack();
						}, 1000);
					}
				});
			}
		},
		/* 提交 */
		submit() {
			for (let i = 0; i < this.form.deceaseds.length; i++) {
				let str = this.form.deceaseds.length > 1 ? '请输入第' + (i + 1) + '位逝者' : '请输入逝者';
				if (this.form.deceaseds[i].name == null || this.form.deceaseds[i].name.trim() == '') {
					uni.showToast({
						icon: 'none',
						title: str + '姓名'
					});
					return;
				}
				if (this.form.deceaseds[i].birthdayType != 3 && (this.form.deceaseds[i].birthday == null || this.form.deceaseds[i].birthday == '')) {
					uni.showToast({
						icon: 'none',
						title: str + '出生日期'
					});
					return;
				}
				if (this.form.deceaseds[i].deathDayType != 3 && (this.form.deceaseds[i].deathDay == null || this.form.deceaseds[i].deathDay == '')) {
					uni.showToast({
						icon: 'none',
						title: str + '逝世日期'
					});
					return;
				}
			}
			if (this.form.relatives[0].relationshipCode == null || this.form.relatives[0].relationshipCode == '') {
				uni.showToast({
					icon: 'none',
					title: '请选择您与逝者的关系'
				});
				return;
			}
			this.$debounce.debounce({
				key: 'submit',
				time: 3000,
				success: () => {
					if (this.oldDeceaseds.length > this.form.deceaseds.length) {
						uni.showModal({
							title: '提示',
							content: '修改后将删减' + (this.oldDeceaseds.length - this.form.deceaseds.length) + '名逝者的信息，删减后无法恢复，确定修改吗？',
							success: res => {
								if (res.confirm) {
									this.createHall();
								}
							}
						});
					} else {
						this.createHall();
					}
				}
			});
		}
	},
	onLoad(data) {
		if (data.hallId != undefined) {
			this.title = '纪念馆信息';
			this.hallId = data.hallId;
			this.loadDetail();
			this.loadDeceased();
		}
		this.getRelationshipList();
	}
};
</script>

<style lang="scss" scoped>
@import './create-memorial-hall.scss';
</style>
